
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        window.onload = function(){

            // //获取count
            // var count = document.getElementById("count");
            //
            // //使count中的内容，自动切换
            // /*
            //  * JS的程序的执行速度是非常非常快的
            //  * 	如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
            //  */
            // /*for(var i=0 ; i<10000 ; i++){
            //     count.innerHTML = i;
            //
            //     alert("hello");
            // }*/
            //
            // /*
            //  * setInterval()
            //  * 	- 定时调用
            //  * 	- 可以将一个函数，每隔一段时间执行一次
            //  * 	- 参数：
            //  * 		1.回调函数，该函数会每隔一段时间被调用一次
            //  * 		2.每次调用间隔的时间，单位是毫秒
            //  *
            //  * 	- 返回值：
            //  * 		返回一个Number类型的数据
            //  * 		这个数字用来作为定时器的唯一标识
            //  */
            // var num = 1;
            //
            // var timer = setInterval(function(){
            //
            //     count.innerHTML = num++;
            //
            //     if(num == 11){
            //         //关闭定时器
            //         clearInterval(timer);
            //     }
            //
            // },1000);
            //
            // //console.log(timer);
            //
            // //clearInterval()可以用来关闭一个定时器
            // //方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
            // //clearInterval(timer);

        };


        /*
         * 使图片可以自动切换
         */

            //获取img标签
            var img1 = document.getElementById("img1");

            //创建一个数组来保存图片的路径
            var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];

            //创建一个变量，用来保存当前图片的索引
            var index = 0;

            //定义一个变量，用来保存定时器的标识
            var timer;

            //为btn01绑定一个单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){

                /*
                 * 目前，我们每点击一次按钮，就会开启一个定时器，
                 * 	点击多次就会开启多个定时器，这就导致图片的切换速度过快，
                 * 	并且我们只能关闭最后一次开启的定时器
                 */

                //在开启定时器之前，需要将当前元素上的其他定时器关闭
                clearInterval(timer);

                /*
                 * 开启一个定时器，来自动切换图片
                 */
                timer = setInterval(function(){
                    //使索引自增
                    index++;
                    //判断索引是否超过最大索引
                    /*if(index >= imgArr.length){
                        //则将index设置为0
                        index = 0;
                    }*/
                    index %= imgArr.length;
                    //修改img1的src属性
                    img1.src = imgArr[index];

                },1000);
            };

            //为btn02绑定一个单击响应函数
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function(){
                //点击按钮以后，停止图片的自动切换，关闭定时器
                /*
                 * clearInterval()可以接收任意参数，
                 * 	如果参数是一个有效的定时器的标识，则停止对应的定时器
                 * 	如果参数不是一个有效的标识，则什么也不做
                 */
                clearInterval(timer);

            };


        };

    </script>
</head>
<body>

<img id="img1" src="img/1.jpg"/>
<br /><br />
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>